<template>
    <div class="wrapper">
        <el-table ref="tableRef" :data="tableData" v-bind:border="true" :size="'default'" label-width="120px"
            v-bind:highlight-current-row="true" :max-height="tableHeight" row-key="id" :header-cell-style="{
                    'background': '#1e78bf', 'color': '#FFFFFF', 'font-size': '16px',
                    'font-weight': 'bold'
                }">
            <template #empty>
                <span>无数据</span>
            </template>
            <el-table-column type="selection" width="55" v-bind:align="'center'" />
            <el-table-column v-bind:align="'center'" prop="name" label="角色" width="180">
            </el-table-column>
        </el-table>
        <el-button-group class="bg">
            <el-button class="btn" type="primary" @click="onSave">保存</el-button>
        </el-button-group>
        <div class="page">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[50, 100, 150, 200]"
                layout="sizes, prev, pager, next" :total="totalnum" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, nextTick } from 'vue';
import { isEmpty, forEach } from 'lodash';
import { ElMessage, ElTable } from 'element-plus';
// import { Plus } from '@element-plus/icons-vue';
import { UserModel, RoleModel } from '@/common/types/model';
import { Request } from '@/app/request';
import { useTableInfo } from '@/hooks/useTable';
import { tableMaxHeightAdjust } from '@/common/const';
const props = defineProps<{
    data?: UserModel,
}>();
const emit = defineEmits( ['yh-closedialog']);
let queryWhere = {};
const tableData = ref<Array<RoleModel>>([]);
const tableRef = ref<InstanceType<typeof ElTable>>();

const tableHeight = ref(100);

const onRefresh = async () => {
    const req = new Request('查询角色', {
        skip: (currentPage.value - 1) * pageSize.value,
        take: pageSize.value,
        ...queryWhere
    });
    const r = await req.post();

    totalnum.value = r.ext;

    tableData.value = [];
    if (!isEmpty(r.obj)) {
        forEach(r.obj, async (value, index: number) => {
            tableData.value.push(value);
            await nextTick();
            forEach(value.sys_roleuser, (user) => {
                if (user.userid === props.data?.id) {
                    tableRef.value!.toggleRowSelection(value, true);
                }
            })
        })
        
    }
}
onMounted(() => {
    onRefresh();
    tableHeight.value = window.innerHeight - Math.ceil(tableRef.value?.$el.getBoundingClientRect().bottom ) + tableMaxHeightAdjust;
});
const { currentPage, orders, pageSize, totalnum, handleSizeChange, handleCurrentChange, handleSortChange } = useTableInfo(onRefresh);
const onSave = async () => {
    const rows = tableRef.value?.getSelectionRows();
    const ids = Array<number>();
    forEach(rows, (v: any) => {
        ids.push(v.id);
    });
    const delids = ids.join(',');
    const req = new Request<any>('用户角色修改', { 
        userid: props.data?.id,
        roleids: delids 
    });
    const r = await req.post();
    ElMessage.success(r.msg);
    if (r.code > 100) {
        emit('yh-closedialog');
    }
    
}
</script>
<style lang='scss' scoped></style>